<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 定位：①相对定位：相对于父级，没有父级相对于body 
		            ②绝对定位：根据页面的左上角进行定位
			*/
			div{
				width: 200px;
				height: 200px;
				background: #f00;
				border-radius: 50%;
				position: relative;/*2D相对定位*/
				posi tion: absolute;/*3D绝对定位*/
				left: 0;
				top: 0;
			}
			.d1{
				background: #00ff00;
			}
			.d3{
				background: #ffff00;
			}
			.d5{
				background: #ff5500;
			}
			.d2{
				border-radius: 0;
			}
			/* 需求：所有的效果改成四方块，不允许使用div选择器，类选择器 */
			/* 类选择器：通过别名选择元素    css语法： .别名{}
			                              html语法： class=“别名”class=“别名1，别名2..”
			       多个别名：建议不超过3个，用空格分隔，解决元素选择器，只按照元素名选择器
			*/
		   .d{
			   border-radius: 0;
		   }
		</style>
	</head>
	<body>
		<div class="d1 d"></div>
		<div class="d2 d"></div>
		<div class="d3 d"></div>
		<p class="d4 d"></p>
		<div class="d5 d"></div>
	</body>
</html>